<template>
	<div>
		<view class="article">
			<table border="0">
				<tr>
					<th>客户名称</th>
					<!-- <th>商户名</th> -->
					<th>成交价格</th>
					<th>订单日期</th>
					<th>销售订单号</th>
					<th>成交数量</th>
					<th>订单类型</th>
					<th>订单图片url</th>
					<th>付款状态</th>
					<th>退货金额</th>
					<th>退货量</th>
					<th>发货状态</th>
					<th>签名</th>
					<th>订单状态</th>
				</tr>
				<block v-if="total > 0">
					<tr v-for="(item, index) in list" :key="index">
						<td>{{ item.cname || '-' }}</td>
						<!-- <td>{{ item.mname || '-' }}</td> -->
						<td>{{ item.orderAmt || '-' }}</td>
						<td>{{ item.orderDay || '-' }}</td>
						<td>{{ item.orderIdSale || '-' }}</td>
						<td>{{ item.orderNum || '-' }}</td>
						<td>{{getOrderType[item.orderType] || '-' }}</td>
						<td>
							<image style="width: 200rpx;height: 100rpx;" mode="aspectFit" :src="item.orderUrl"></image>
						</td>
						<td>{{getPayingStt[item.payingStt] || '-' }}</td>
						<td>{{ item.returnAmt || '-' }}</td>
						<td>{{ item.returnNum || '-' }}</td>
						<td>{{ getShippingStt[item.shippingStt] || '-' }}</td>
						<td style="padding: 0 16rpx;">
							<image style="width: 200rpx;height: 100rpx;" mode="aspectFit" :src="item.signUrl"></image>
						</td>
						<td>{{getStt[item.stt] || '-' }}</td>
						<!-- <td>
							<view class="btns">
								<view class="button-mini"
									@tap="navigateTo(`/pages/datas/analyseDetail?cid=${item.cid}`)">详情</view>
							</view>
						</td> -->
					</tr>
				</block>


			</table>
		</view>
		<u-divider v-if="total == 0" style="width: 100vw;" textSize="34" text="暂无数据"></u-divider>
	</div>
</template>

<script>
	export default {
		async onLoad(data) {
			this.formData.cid = data.cid
			await this.getList(this.formData)
			console.log(this.list);
		},
		data() {
			return {
				formData: {
					cid: "",
					pageNo: 1,
					pageSize: 10
				},
				list: [],
				total: 0,
				getOrderType: ["正常单", "散单"],
				getPayingStt: ["未付款", "已付款"],
				getShippingStt: ["未发货", "已发货"],
				getStt: ["未完成", "已完成", "已撤销", "已删除"],
			}
		},
		methods: {
			async getList(formData) {
				// uni.showLoading({
				// 	title: "加载中...",
				// });
				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null) {
						delete requestData[item]
					}
				});
				let data = await this.$api.orderListApi({
					data: requestData
				})

				if (data.code == 200) {
					this.list = requestData.pageNo == 1 ? data.result.list : this.list.concat(data.result.list)
					if (data.result.list <= 0) {
						// uni.showToast({
						// 	title: "没有更多了",
						// 	icon: "none"
						// })
					}
					this.total = data.result.total
				}
				// uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article {
		padding: 32rpx 17rpx;
		overflow: scroll;

		.article_table {
			background: #FFFFFF;
			min-height: 274rpx;
			border-radius: 20rpx;
			padding: 12rpx;
			box-sizing: border-box;
			color: #272727;

			.title {
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #F1F1F1;

				.operate {
					padding: 0 108rpx;
				}
			}

			.table_body {
				display: flex;
				justify-content: space-around;
				text-align: center;
				margin-top: 20rpx;
				height: 80rpx;
				line-height: 60rpx;

				.num {
					color: #FE3430;
				}

				.btn1 {
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						background: #FE3430;
						width: 124rpx;
						height: 48rpx;
						line-height: 30rpx;
						border-radius: 24rpx;
						padding: 13rpx 0;
						font-size: 24rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
		}

		table {
			border-radius: 20rpx;
			background-color: #fff;

			tr {
				// display: flex;
			}

			th {
				white-space: nowrap;
				padding: 32rpx 16rpx;
				// width: 140rpx;
				border-bottom: 2rpx solid #f1f1f1;
			}

			td {
				padding: 32rpx 16rpx;
				white-space: nowrap;
				text-align: center;
			}

			.btns {
				view {
					margin: 10rpx;
				}
			}
		}
	}
</style>
